<template>
     <van-tabs v-model:active="active">
      <van-tab title="热点">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
        <div class="zuo" v-for="(v, i) in redata" :key="i" @click="gettabbar(v.id)">
          <div>
            <img v-lazy="v.image" alt="" />
          </div>
          <div>
            <h4>{{ v.title }}</h4>
            <h6>
              <span>{{ v.channel_name }}</span> <span>{{ v.date_str }}</span>
            </h6>
          </div>
        </div>
                </van-list>
      </van-tab>
      <van-tab title="专家科普">
        <div class="pu" v-for="(item, index) in pudata" :key="index">
          <h3>{{ item.topic_info.title }}</h3>
          <div class="wz">
            <p>
              {{ item.topic_info.content }}
            </p>
          </div>
          <div>
            <img
              :src="item.doctor_info.image"
              alt=""
              style="width: 30px; height: 30px; border-radius: 50px"
            />&nbsp;<span>{{ item.doctor_info.name }}</span
            >&nbsp;<span style="background: #ffeee4; color: #ed6e0e">{{
              item.doctor_info.tag
            }}</span
            >&nbsp;<span>{{ item.doctor_info.title }}</span
            >&nbsp;<span>{{ item.doctor_info.hospital }}</span>
          </div>
        </div>
        <hr />
      </van-tab>
      <van-tab title="生活">
        <div class="zuo" v-for="(v, i) in shengdata" :key="i">
          <div>
            <img :src="v.image" alt="" />
          </div>
          <div>
            <h4>{{ v.title }}</h4>
            <h6>
              <span>{{ v.channel_name }}</span> <span>{{ v.date_str }}</span>
            </h6>
          </div>
        </div>
      </van-tab>
      <van-tab title="母婴">
        <div class="zuo" v-for="(v, i) in mudata" :key="i">
          <div>
            <img :src="v.image" alt="" />
          </div>
          <div>
            <h4>{{ v.title }}</h4>
            <h6>
              <span>{{ v.channel_name }}</span> <span>{{ v.date_str }}</span>
            </h6>
          </div>
        </div>
      </van-tab>
      <van-tab title="辟谣">
        <div class="zuo" v-for="(v, i) in pidata" :key="i">
          <div>
            <img :src="v.image" alt="" />
          </div>
          <div>
            <h4>{{ v.title }}</h4>
            <h6>
              <span>{{ v.channel_name }}</span> <span>{{ v.date_str }}</span>
            </h6>
          </div>
        </div>
      </van-tab>
    </van-tabs>
</template>
<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from 'vue' 
import { useRouter } from 'vue-router'
import {  getpu, getshen, getmu, getpi, getfu, getre } from '../../request/http'
const pudata = ref()
const router = useRouter()
getpu(1).then((res) => {
  console.log(res)
  pudata.value = res.data.topic_check_list
})
//底部 生活
const shengdata = ref()
getshen(1).then((res) => {
  console.log(res)
  shengdata.value = res.data.content_list
})
//底部 母婴
const mudata = ref()
getmu(1).then((res) => {
  console.log(res)
  mudata.value = res.data.content_list
})
//底部 辟谣
const pidata = ref()
getpi(1).then((res) => {
  console.log(res)
  pidata.value = res.data.content_list
})
//底部 热点
const fudata = ref()
getfu(1).then((res) => {
  console.log(res)
  fudata.value = res.data.item_list
})
//底部 热点
const isLoadingMore = ref(false);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const pagesize = ref(5);
const active = ref(0);
const redata = ref<any>([]);
let timer: number | null = null;
getre(1).then((res) => {
  redata.value = res.data.content_list.slice(0, 5)
  console.log(redata.value);
})
const loadInitialData = async () => {
  const res = await getre(1);
  redata.value = res.data.content_list.slice(0, pagesize.value);
};

const loadMoreData = async () => {
  if (isLoadingMore.value || finished.value) return; // 防止重复加载和已完成的状态
  isLoadingMore.value = true;

  try {
    const res = await getre(1); // 获取新数据
    const newData = res.data.content_list.slice(page.value * pagesize.value, (page.value + 1) * pagesize.value);
    redata.value = [...redata.value, ...newData]; // 合并数据
    page.value++;

    // 更新 finished 状态
    if (newData.length < pagesize.value) {
      finished.value = true; // 如果新加载的数据少于请求的数量，设置为 finished
    }
  } catch (error) {
    console.error("加载更多数据失败:", error);
  } finally {
    isLoadingMore.value = false;
  }
};
const startAutoLoad = () => {
  timer = setInterval(() => {
    loadMoreData(); // 每隔5秒自动加载更多数据
  }, 1000);
};
const handleScroll = () => {
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.offsetHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop + windowHeight >= documentHeight) {
    loadMoreData();
  }
};

onMounted(() => {
  loadInitialData();
  startAutoLoad(); 
  window.addEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer); // 清除定时器
  }
  window.removeEventListener('scroll', handleScroll);
});


//底部详情
const gettabbar = (id: string) => {
  router.push({
    path: `/tabbar/${id}`
  })
}
</script>
<style scoped lang="scss">
.zuo {
  width: 100%;
  height: 100%;
  display: flex;
  img {
    margin-right: 10px;
    margin-left: 10px;
    height: 90px;
    margin-top: 17px;
  }
  h4 {
    font-weight: normal;
  }

  h6 {
    font-weight: normal;
  }
}
.pu {
  width: 98%;
  margin: 0 auto;
  // display: flex;
  //     flex-wrap: wrap;
  .wz {
    p {
      width: 100%; // 设置文本容器宽度
      height: 40px;
      white-space: nowrap; // 防止文本换行
      overflow: hidden; // 隐藏溢出文本
      text-overflow: ellipsis; // 显示省略号
      background: #e4dad4;
    }
  }
}
</style>
